import React from "react";
import WrapFormItem from "components/wrap-form-item";
import { Col, Row, Select } from "antd";
import MultiSelector from 'components/template/multi-selector';
import { messages } from "share/common";
const Option = Select.Option;
import symbolOption from './symbol-option'

const hasValue = value => value && value.symbol && value.values && value.values.length > 0;

export function receiptPayee(entityType) {
  return {
    id: 'RECEIPT_PAYEE', label: messages('expense-10.key59')/*销售方名称*/,
    initialValue: { symbol: 'IN' },
    component: <WrapFormItem parser={value => value || { symbol: 'IN' }}>
      {(onChange, value) => (
        <Row gutter={10}>
          <Col span={10}>
            <Select
              style={{ width: '100%' }}
              onChange={symbol => onChange({ symbol })}
              value={value.symbol}
              dropdownMatchSelectWidth={false}
            >
              {symbolOption.map(item => <Option key={item.key}>{item.label}</Option>)}
            </Select>
          </Col>
          <Col span={14} style={{ height: 32 }}>
            <MultiSelector
              type="receipt_payee"
              params={entityType ? { entityType } : null}
              value={value.values}
              dropDownStyle={{ width: 220 }}
              onChange={values => onChange({ values })}
            />
          </Col>
        </Row>
      )}
    </WrapFormItem>,
    hasValue,
    parser: value => hasValue(value) ? {
      'RECEIPT_PAYEE': {
        symbol: value.symbol,
        values: value.values.map(item => item.key === messages('expense-10.key60')/*(空值)*/ ? '' : item.key)
      }
    } : null,
    tagParser: value =>
      `${symbolOption.find(item => item.key === value.symbol).label}: ` +
      `${value.values.map(item => item.key || messages('expense-10.key60')/*(空值)*/).join('、')}`
  }
}
